<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form label-width="80px">
          <!-- 关键字 搜索框 后面按钮 -->
          <el-form-item label="关键字">
            <el-row type="flex">
              <el-col :span="12">
                <el-input
                  ref="input"
                  placeholder="根据编号搜索"
                  style="width: 240px"
                  size="small"
                  type="text"
                  v-model="queryParams.keyword"
                ></el-input>
              </el-col>
              <el-col :span="12" :style="{ textAlign: 'right' }">
                <el-button size="small" @click="revclick">清除</el-button>
                <el-button size="small" type="primary" @click="serclick">搜索</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <!-- 一共多少条 -->
        <el-alert :title="`数据一共${counts}条`" type="info" show-icon :closable="false">
        </el-alert>
        <!-- 数据表单 -->
        <el-table   :header-cell-style="{background:'rgb(250,250,250)',fontSize:'16px'}" :data="tableData" style="width: 100%" >
          <el-table-column prop="id" label="编号" width="200px">
          </el-table-column>
          <el-table-column  prop="questionType" label="题型" width="100px">
            <template #default="{row}">
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2' ">多选</span>
              <span v-else-if="row.questionType === '3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column  prop="questionIDs" label="题目编号" width="250px">
            <template #default="{row}">
              <!-- <span >{{row.questionIDs}}</span> -->
              <div v-for="(item,index) in row.questionIDs" :key="index">
               <a href="#" @click="aclick({...item})" style="color:blue">{{item.number}}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180px">

          </el-table-column>
          <el-table-column prop="totalSeconds" label="答辩时间(s)" width="200px">

          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="200px">

          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="200px">

          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
            <el-button plain class="An" type="danger" icon="el-icon-delete" circle @click="removclick(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
        <el-row type="flex" justify="end">
          <el-pagination
            @size-change="handleSizeChange"
            :current-page="queryParams.page"
            :page-sizes="[5, 10, 15, 20]"
            @current-change="handleCurrentChange"
            :page-size="5"
            layout="prev, pager, next,sizes,jumper"
            :total="counts">
          </el-pagination>
          </el-row>
       </div>
      </el-card>
    </div>
    <questions-preview ref="previewDialog" :showPreviewDialog.sync="showPreviewDialog" :previewRow="previewRow"></questions-preview>
  </div>

</template>

<script>
import {randoms,removeRandoms} from '@/api/hmmm/questions.js'
import  QuestionsPreview from '../components/questions-preview.vue'
export default {
  components:{
    QuestionsPreview
  },
  data () {
    return {
      tableData: [],
      queryParams: {
        page: 1,
        pagesize: 5
      },
      counts: null,
    showPreviewDialog:false,
    previewRow:null
    }
  },
  created () {
    this.getrandoms()
  },
  methods: {
    // 点击编码跳出模态框
    aclick(item){
      this.showPreviewDialog = true
      this.previewRow = item
      this.$nextTick(()=>{
        this.$refs.previewDialog.getDetailData()
      })
    },
    // 点击清除按钮
    revclick () {
      this.queryParams.keyword = ''
    },
    // 点击搜索按钮
    serclick () {
      this.queryParams.keyword = this.$refs.input.value
      this.getrandoms()
    },
    // 点击删除数据
    removclick (row) {
      // console.log(row.id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 删除数据的接口
        await removeRandoms(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新渲染页面
        this.getrandoms()
      })
    },
    // 切换每条页数
    handleSizeChange (val) {
      // console.log(val);
      this.queryParams.pagesize = val
      this.getrandoms()
    },
    // 切换当前页
    handleCurrentChange (value) {
      // console.log(value);
      this.queryParams.page = value
      this.getrandoms()
    },
    // 获取列表
    async getrandoms () {
    // 脱壳 解构数据
      const { data: { items, counts } } = await randoms(this.queryParams)
      //  让空列表等于后台拿到的列表
      this.tableData = items
      this.counts = counts
      console.log(items)
    }

  }
}
</script>

<style scoped>
.el-alert{
  margin-bottom: 10px;
}
.An{
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
}
</style>
